<template>
  <div class="operate-list">
    <u-button
      @click="button.method(record)"
      v-for="(button, index) in visibleOpertes"
      :key="button.label"
      class="custom-button"
      :class="{ primary: index == visibleOpertes.length - 1 }"
      >{{ button.label }}</u-button
    >
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  props: {
    operates: {
      type: Array,
      default: () => [],
    },
    record: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    ...mapGetters(["buttonMap"]),
    // 计算显示的按钮
    visibleOpertes() {
      let operates = this.operates || [];
      let visibleOperates = operates.filter((btn) => {
        let isShow = btn.show;
        let hasPermission = this.buttonMap.includes(btn.permission);
        return isShow && hasPermission;
      });
      return visibleOperates;
    },
  },
};
</script>
<style lang="less" scoped>
.operate-list {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 32rpx;
  .custom-button {
    width: 160rpx;
    height: 64rpx;
    border-radius: 4rpx;
    font-size: 28rpx;
    color: #767676 !important;
    background-color: #fff !important;
    border: 2rpx solid #c1c1c1 !important;
    margin: 0;
  }
  .custom-button + .custom-button {
    margin-left: 24rpx;
  }
  .custom-button.primary {
    background-color: #ff874fff !important;
    border-color: #ff874fff !important;
    color: #fff !important;
  }
}
</style>
